<template>
  <div class="common_wrap">
    <div class="common_title">新建/编辑<div class="back_btn" @click="goBack"><i></i><span>返回</span></div></div>
    <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
      <el-form-item
          prop="id"
          label="指标Id："
          :rules="[
            { required: true, message: '指标id不能为空', trigger: 'blur' },
          ]"
      >
        <el-input v-model="dynamicValidateForm.id" style="width: 100px" maxlength="16" :disabled="dynamicValidateForm.trueId"></el-input>
      </el-form-item>
      <el-form-item
          prop="name"
          label="指标名称："
          :rules="[
            { required: true, message: '指标名称不能为空', trigger: 'blur' },
          ]"
      >
        <el-input v-model="dynamicValidateForm.name" style="width: 200px" maxlength="64"></el-input>
      </el-form-item>
      <el-form-item
          v-for="(item, index) in dynamicValidateForm.dimensions"
          :label="'指标维度：'"
          :key="index"
      >
        <span class="dimension-label">维度：</span><el-input v-model="item.dimension" style="width: 100px"></el-input>
        <span class="unit-label">计量：</span>
        <el-select v-model="item.unit" placeholder="请选择" style="width: 100px">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        <el-button v-if="item.isMain === 1" @click.prevent="setPrimary(index)" type="text" class="setPrimary" :disabled="true">取消主要维度</el-button>
        <el-button v-else @click.prevent="setPrimary(index)" type="text" class="setPrimary" :disabled="false">设为主要维度</el-button>
        <el-button @click.prevent="removeDomain(index)" type="text">删除</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="addDomain">新增维度</el-button>
        <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
const options = [
  {
    value: '%',
    label: '%'
  },
  {
    value: '个',
    label: '个'
  },
  {
    value: '公里',
    label: '公里'
  },
  {
    value: '家',
    label: '家'
  },
  {
    value: '件',
    label: '件'
  },
  {
    value: '亩',
    label: '亩'
  },
  {
    value: '人',
    label: '人'
  },
  {
    value: '套',
    label: '套'
  },
  {
    value: '万㎡',
    label: '万㎡'
  },
  {
    value: '万美元',
    label: '万美元'
  },
  {
    value: '万元',
    label: '万元'
  },
  {
    value: '位次',
    label: '位次'
  },
  {
    value: '亿元',
    label: '亿元'
  },
  {
    value: '元',
    label: '元'
  }
]
export default {
  name: "infoMaintainEdit",
  data() {
    return {
      dynamicValidateForm: {
        dimensions: [{
          dimension: '',
          unit: '',
          isMain: 0
        }],
        id: '',
        name: ''
      },
      options
    }
  },
  created(){
    const query = this.$route.query
    if(query.id){
      this.dynamicValidateForm = {
        id:query.quotaId,
        name:query.quotaName,
        dimensions:query.dimensionList.map(item=>{
          return{
            dimension:item.dimension,
            unit:item.unit,
            isMain:0,
          }
        }),
        trueId:query.id
      }
    }
  },
  methods: {
    goBack(){
      history.go(-1)
    },
    removeDomain(index) {
      if (index !== -1) {
        this.dynamicValidateForm.dimensions.splice(index, 1)
      }
    },
    addDomain() {
      this.dynamicValidateForm.dimensions.push({
        dimension: '',
        unit: '',
        isMain: 0,
        key: Date.now()
      });
    },
    setPrimary(index) {
      for(let i = 0; i < this.dynamicValidateForm.dimensions.length; i++) {
        if(this.dynamicValidateForm.dimensions[i].isMain === 1) {
          this.dynamicValidateForm.dimensions[i].isMain = 0
          this.dynamicValidateForm.dimensions[index].isMain = 1
          return
        }
      }
    },
    submitForm(formName) {
      for(let i = 0; i < this.dynamicValidateForm.dimensions.length; i++) {
        if(!this.dynamicValidateForm.dimensions[i].unit || !this.dynamicValidateForm.dimensions[i].dimension) {
          this.$message.error("请完善指标维度列表")
          return
        }
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if(this.dynamicValidateForm.trueId){
            // 编辑
            const params = {
              quotaId: this.dynamicValidateForm.id,
              quotaName: this.dynamicValidateForm.name,
              dimension: this.dynamicValidateForm.dimensions
            }
            this.$api.updateQquota(params).then(res=>{
              if(res.status === 200){
                this.$message.success("更新成功")
                setTimeout(()=>{
                  this.$router.go(-1)
                }, 1500)
              }else{
                this.$message.error(res.data.errmsg)
              }
            })
          }else{
            // 新增
            const params = {
              quotaId: this.dynamicValidateForm.id,
              quotaName: this.dynamicValidateForm.name,
              dimension: this.dynamicValidateForm.dimensions
            }
            this.$api.creatQquota(params).then(res=>{
              if(res.status === 200){
                this.$message.success("提交成功")
                setTimeout(()=>{
                  this.$router.go(-1)
                }, 1500)
              }else{
                this.$message.error(res.data.errmsg)
              }
            })
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  }
}
</script>

<style scoped>
  .unit-label{
    margin-left: 15px;
  }
  .setPrimary{
    margin-left: 8px;
  }
</style>